<template>
  <div class="pvideo">
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="已审核视频" status=1>
          <div height="600px">
            <h2>已审核视频</h2>
            <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
              <div style="padding: 6px;height:600px">
                <a class="bottom clearfix" style="margin-left:130px">
                  <el-col :span="8" v-for="list in Lists" :key="list.id">
                    <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
                      <div style="padding: 6px">
                        <h4>{{list.category}}</h4>
                        <p>{{list.name}}</p>
                        <img :src="list.thumbnail" alt />
                        <span> {{list.introduction}} </span>
                      </div>
                    </el-card>
                  </el-col>
                </a>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
         <el-tab-pane label="待审核视频" status=0>
          <div height="600px">
            <h2>待审核视频</h2>
            <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
              <div style="padding: 6px;height:600px">
                <a class="bottom clearfix" style="margin-left:130px">
                  <el-col :span="8" v-for="list in Lists" :key="list.id">
                    <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
                      <div style="padding: 6px">
                        <h4>{{list.category}}</h4>
                        <p>{{list.name}}</p>
                        <img :src="list.thumbnail" alt />
                        <span> {{list.introduction}} </span>
                      </div>
                    </el-card>
                  </el-col>
                </a>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
         <el-tab-pane label="审核未通过视频" status=2>
          <div height="600px">
            <h2>审核未通过视频</h2>
            <el-col :span="8" v-for="list in Lists" :key="list.id">
              <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
                <div style="padding: 6px;height:600px">
                  <a class="bottom clearfix" style="margin-left:130px">
                      <h4>{{list.category}}</h4>
                      <p>{{list.name}}</p>
                      <img :src="list.thumbnail" alt />
                      <span> {{list.introduction}} </span> 
                  </a>
                </div>
              </el-card>
            </el-col>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import videoApi from "@/api/video.js";
export default {
  data() {
    return {
      Lists: [
        { id: "1", category: "sports", name: "zjf" ,introduction:"are you ok",thumbnail:"ok"},
        { id: "2", category: "news", name: "zzl" ,introduction:"i'm fine",thumbnail:"no"},
        { id: "3", category: "tv", name: "lxw" ,introduction:"thanks",thumbnail:"yes"},
      ],
      status:"",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      videoApi.list(status).then(response => {
        const res = response.data;
        this.Lists = res.data;
      });
    }
  }
};
</script>

<style scoped>
.pvideo {
  position: absolute;
  width: 80%;
  /* background: url("../../../assets/manager.jpg") no-repeat center center; */
  right: 10%;
  bottom: 0px;
  overflow-y: auto;
  left: 10%;
  top: 60px;
}
.el-card{
  width: 300px;
}
.border-card {
  /* background: url("../../../assets/manager.jpg") no-repeat center center; */
  /* background-color: rgb(255, 255, 255, 0.1); */
  overflow-y: auto;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>